<template>
  <div class="box">
    <div class="header">
      <div class="back" @click="back()"></div>
      <p>购物车</p>
    </div>
    <div class="data" v-for="(item,index) in shopData" :key="index">
      <div class="ckbtnbox">
        <input type="checkbox" :value="index" v-model="isCkall" class="ckbtn" @change="ckOne()">
      </div>
      <div class="img">
        <img :src="item.image" alt="">
        <p @click="del(index)">删除</p>
      </div>
      <div class="title">
        <p>{{item.title}}</p>
        <div class="pricebox">
          <p class="price">￥{{item.price}}</p>
          <div class="numbtn">
            <div class="minus" @click="minus(index)">-</div>
            <div class="num">{{item.amount}}</div>
            <div class="plus" @click="plus(index)">+</div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="ckbtnbox">
        <input type="checkbox" class="checkallbtn" v-model="ckall" @change="ckalls()">
      </div>
      <span>全选</span>
      <p>合计:<span>￥{{sumprice}}</span></p>
      <div :class='ckall?"changered":"gopay"'>
        <router-link to="/ConfirmOrder">去结算</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  mounted() {
    var that = this;
    axios.get('http://vueshop.glbuys.com/api/user/myorder/index?uid=696443691& status=0&token=1ec949a15fb709370f&page=1').then(function(res){
      that.shopData = res.data.data[0].goods;
    })
  },
  data() {
    return {
      ckall:false,
      shopData:[],
      isCkall:[]
    };
  },
  methods: {
    //全选or全不选
    ckalls(){
      if(this.ckall == true) {
        for(var i = 0 ; i < this.shopData.length ; i++){
          this.isCkall.push(i)
        }
      }else{
        this.isCkall = []
      }
    },
    //减少
    minus(index){
      if(this.shopData[index].amount <= 0){
        this.shopData[index].amount = 0;
      }else{
        this.shopData[index].amount--;
      }
    },
    //增加
    plus(index){
      if(this.shopData[index].amount >= 0){
        this.shopData[index].amount++;
      }else{
        this.shopData[index].amount = 0;
      }
    },
    //单选
    ckOne(){
      for(var i = 0 ; i<this.shopData.length ; i++) {
        if(this.isCkall.length == this.shopData.length){
          this.ckall = true
        }else{
          this.ckall = false
        }
      }
    },
    //删除
    del(index){
      this.shopData.splice(index,1)
    },
    //返回
    back(){
      // this.$router.back(-1)
      this.$router.push({
						path: '/'
			})
    }
  },
  computed: {
    sumprice () {
      var sum = 0;
      for(var i = 0 ; i < this.isCkall.length ; i++){
        sum += this.shopData[this.isCkall[i]].price*this.shopData[this.isCkall[i]].amount
      }
      return sum;
    }
  }
};
</script>

<style scoped>
.changered{
  background: #cc0006;
  width: 2.26rem;
  height: 1.02rem;
  text-align: center;
  line-height: 1.02rem;
  font-size: 0.3rem;
  color: #ffffff;
  position: absolute;
  right: 0;
}
.changered a{
  color: #fff;
}
.header{
    width: 100%;
    height: 1.01rem;
    line-height: 1.01rem;
    text-align: center;
    border-bottom: 0.02rem solid #f7f7f7;
    box-sizing: border-box;
    font-size: 0.32rem;
    display: flex;
    justify-content: flex-start;
  }
  .header p{
    width: 72%;
  }
  .back{
    width: 1rem;
    height: 100%;
    background-image: url(/static/Back_LSQ.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 0 50%;
  }
  .data {
    width: 100%;
    height: 2.42rem;
    background: #ffffff;
    border-bottom: 3px solid #f4f4f4;
    text-align: center;
    font-size: 0.14rem;
    box-sizing: border-box;
    display: flex;
    justify-content:space-between;
    align-items: center;
  }
  .data .ckbtnbox{
    width: 10%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .data .ckbtnbox .ckbtn{
    width: 0.3rem;
    height: 0.3rem;
    border: 0.02rem solid black;
    border-radius: 100%;
    margin-left: 0.26rem;
    box-sizing: border-box;
  }
  .data .img{
    width: 20%;
    height: 100%;
    margin-left: 0.32rem;
    font-size: 0.22rem;
    color: #d6d6d6;
    margin-top: 1.2rem;
    margin-right: 0.48rem;
  }
  .data .img img{
    width: 1.23rem;
    height: 1.23rem;
  }
  .data .title{
    height: 100%;
    text-align: left;
    margin-right: 0.46rem;
    margin-top: 0.5rem;
    font-size: 0.24rem;
  }
  .data .title .pricebox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.43rem;
  }
  .data .title .pricebox .price{
    color: #d11a1a;
    font-size: 0.3rem;
  }
  .data .title .pricebox .numbtn{
    width: 2.08rem;
    height: 0.54rem;
    border: 1px solid #383838;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 1.2rem;
  }
  .data .title .pricebox .numbtn div{
    height: 0.34rem;
    width: 0.58rem;
    text-align: center;
  }
  .data .title .pricebox .numbtn .num{
    border-left: 1px solid #383838;
    border-right: 1px solid #383838;
  }
  .footer {
    width: 100%;
    height: 1.02rem;
    border-top: 0.02rem solid #f8f8f8;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;

  }
  .footer span{
    margin-left: 0.14rem; 
    font-size: 0.3rem;
  }
  .footer p{
    font-size: 0.25rem;
    position: absolute;
    right: 2.46rem;
  }
  .footer p span{
    font-size: 0.25rem;
    color: #c80000;
  }
  .ckeckallbtn{
    width: 0.3rem;
    height: 0.3rem;
    border: 0.02rem solid black;
    border-radius: 100%;
    display: inline-block;
    margin-left: 0.26rem;
    box-sizing: border-box;
  }
  .ckeckallbtntrue{
    background: url(/static/CheckAll_Active_LSQ.png);
    background-size: 120%;
    background-position: 50% 50%;
    border: none;
    box-sizing: border-box;
  }
  .gopay{
    width: 2.26rem;
    height: 1.02rem;
    background: #bfbfbf;
    text-align: center;
    line-height: 1.02rem;
    font-size: 0.3rem;
    color: #ffffff;
    position: absolute;
    right: 0;
  }
  .gopay a{
    color: #fff;
  }
</style>
